<template>
  <div id="app">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">事件名称：{{ name }}</span>
          </div>
          <span style="line-height: 36px;">事件描述：{{ descreption }}</span>
          <br/>
          <span style="line-height: 36px;">币种数量：{{ outcomeCount }}</span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">账户</span>
          </div>
          <el-radio-group v-model="currentAccount">
            <el-radio v-for="(account, index) in accounts" :label="index" :key="index">{{ account }}</el-radio>
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {eventAbi, eventAddress} from '../contracts/contracts.js'
  export default {
    data () {
      return {
        eventAddress: '0xcd83feedba7b76aa1b20a601f4f12ead594798fc',
        currentAccount: '0',
        accounts: [],
        balances: [],
        eventInstance: null,
        name: null,
        descreption: null,
        outcomeCount: null,
        outcomes: []
      }
    },
    mounted() {
      this.refreshAccounts()
      this.eventInstance = this.web3.eth.contract(eventAbi).at(this.eventAddress)
      this.refreshData('eventInstance', 'name')
      this.refreshData('eventInstance', 'descreption')
      this.refreshData('eventInstance', 'outcomeCount', 'number')
      this.refreshArray('eventInstance', 'outcomes', )
    },
    methods: {
      refreshArray(contractName, propertyName, arrayLength) {
        console.log(1111)
        this[propertyName] = new Array(arrayLength)
        let _ = this
        for (let i = 0; i < arrayLength; i++) {
          console.log(2222)
          this[contractName][propertyName].call(i, (error, result) => {
            if (!error) {
              _[propertyName][i] = result.toNumber()
              console.log(result)
            } else {
              alert(error)
            }
          })
        }
      },
      refreshData(contractName, propertyName, propertyType) {
        let _ = this
        this[contractName][propertyName].call((error, result) => {
          if (!error) {
            if (propertyType === 'number') {
              _[propertyName] = result.toNumber()
            } else {
              _[propertyName] = result
            }
          } else {
            alert(error)
          }
        })
      },
      refreshAccounts() {
        let _ = this
        this.web3.eth.getAccounts((error, result) => {
          if (!error) {
            _.accounts = result
            _.currentAccount = result[0]
            _.refreshBalances()
          } else {
            alert(error)
          }
        })
      },
      refreshBalances() {
        let _ = this
//        this.web3.eth.getAccounts((error, result) => {
//          _.accounts = result
//          _.currentAccount = result[0]
//        })
      }
    }
  }
</script>
